



import { 
  ChatDotRound, 
  User, 
  ChatLineSquare, 
  Setting, 
  ArrowDown, 
  Send, 
  Plus, 
  LogOut
} from '@element-plus/icons-vue'

const component = {
  name: 'ChatHome',
  components: {
    ChatDotRound,
    User,
    ChatLineSquare,
    Setting,
    ArrowDown,
    Send,
    Plus,
    LogOut
  },
  data() {
    return {
      inputMessage: '',
      loading: false,
      creatingRoom: false,
      messages: [],
      chatRooms: [],
      currentUser: null,
      aiRoom: null,
      currentRoom: null,
      showCreateRoomDialog: false,
      roomForm: {
        name: '',
        roomType: 'private',
        memberIdsInput: ''
      },
      // 表单验证规则
      roomRules: {
        name: [
          { required: true, message: '请输入聊天室名称', trigger: 'blur' },
          { min: 2, max: 20, message: '聊天室名称长度应在2-20个字符之间', trigger: 'blur' }
        ],
        roomType: [
          { required: true, message: '请选择聊天室类型', trigger: 'change' }
        ],
        memberIdsInput: [
          { 
            validator: (rule, value, callback) => {
              if (this.roomForm.roomType === 'group' && !value.trim()) {
                callback(new Error('群聊必须指定成员'));
              } else if (value.trim()) {
                // 验证成员ID格式
                const ids = value.split(',').map(id => id.trim()).filter(id => id);
                for (const id of ids) {
                  if (!/^\d+$/.test(id)) {
                    callback(new Error('成员ID必须是数字'));
                    return;
                  }
                }
              }
              callback();
            }, 
            trigger: 'blur' 
          }
        ]
      },
      // AI模型相关数据
      aiModels: [],
      selectedModelId: 'phi2', // 默认选择phi2模型
      currentModel: { id: 'phi2', name: 'Phi-2', description: '微软小型语言模型', type: 'free' },
      // 模型类型定义
      modelTypes: { free: '免费模型', premium: '高级模型' },
      // UI状态
      showModelDropdown: false
    }
  },
  computed: {
    // 获取分组后的模型列表
    groupedModels() {
      return aiService.groupModelsByType(this.aiModels);
    },
    // 获取有模型的类型列表
    availableModelTypes() {
      const modelsByType = this.getModelsByType()
      return Object.keys(this.modelTypes).filter(type => modelsByType[type].length > 0)
    }
  },
  mounted() {
    this.initializeApp();
    // 监听点击外部区域关闭下拉菜单等
    document.addEventListener('click', this.handleDocumentClick);
  },
  beforeUnmount() {
    document.removeEventListener('click', this.handleDocumentClick);
  },
  methods: {
    // 初始化应用
    async initializeApp() {
      try {
        await Promise.all([
          this.loadCurrentUser(),
          this.loadChatRooms(),
          this.loadAIModels()
        ]);
        // 默认选中AI聊天室
        if (this.aiRoom) {
          this.switchRoom(this.aiRoom);
          // 加载AI聊天室的欢迎消息
          this.loadAIMessages();
        }
      } catch (error) {
          console.error('初始化应用失败:', error);
          this.$message.error('初始化失败，请刷新页面重试');
        }
      },
    
    // 加载当前用户信息
    async loadCurrentUser() {
      try {
        this.currentUser = await authService.getCurrentUser();
      } catch (error) {
        console.error('加载用户信息失败:', error);
        this.$message.error('加载用户信息失败');
        // 如果获取用户信息失败，可能是token过期，跳转到登录页
        authService.logout();
        this.$router.push('/login');
      }
    },
    
    // 加载聊天室列表
    async loadChatRooms() {
      try {
        // 创建默认的AI聊天室
        this.aiRoom = {
          id: 'ai-chat',
          name: 'AI 助手',
          roomType: 'ai'
        };
        
        // 从服务器加载用户的聊天室
        const rooms = await chatRoomService.getUserChatRooms();
        this.chatRooms = rooms || [];
      } catch (error) {
        console.error('加载聊天室列表失败:', error);
        this.$message.error('加载聊天室列表失败');
      }
    },
    
    // 加载AI模型列表
    async loadAIModels() {
      try {
        const models = await aiService.getAvailableModels();
        this.aiModels = models || [];
        
        // 确保当前选中的模型存在，如果不存在则选择第一个
        if (!this.aiModels.find(model => model.id === this.selectedModelId) && this.aiModels.length > 0) {
          this.onModelChange(this.aiModels[0]);
        }
      } catch (error) {
        console.error('加载AI模型列表失败:', error);
        // 使用默认模型数据作为降级方案
        this.aiModels = [
          { id: 'phi2', name: 'Phi-2', description: '微软小型语言模型', type: 'free' },
          { id: 'mistral', name: 'Mistral', description: '高效的小型语言模型', type: 'free' },
          { id: 'zephyr', name: 'Zephyr', description: '对话优化的语言模型', type: 'free' },
          { id: 'gemma', name: 'Gemma', description: '谷歌开源语言模型', type: 'free' },
          { id: 'gpt4', name: 'GPT-4', description: '高级语言模型', type: 'premium' }
        ];
      }
    },
    
    // 加载AI聊天室欢迎消息
    loadAIMessages() {
      this.messages = [
        {
          id: 1,
          content: '欢迎使用AI聊天助手！',
          senderType: 'ai',
          timestamp: new Date()
        },
        {
          id: 2,
          content: '可以点击右上角的「创建聊天室」按钮来创建新的聊天。',
          senderType: 'ai',
          timestamp: new Date(Date.now() + 1000)
        },
        {
          id: 3,
          content: '支持两种模式：1. 与AI助手聊天 2. 创建人人聊天室（私聊或群聊）',
          senderType: 'ai',
          timestamp: new Date(Date.now() + 2000)
        }
      ];
    },
    
    // 发送消息
    async sendMessage() {
      if (!this.inputMessage.trim() || this.loading || !this.currentRoom) {
        return;
      }
      
      const messageContent = this.inputMessage.trim();
      const userMessage = {
        id: Date.now(),
        content: messageContent,
        senderType: 'user',
        senderName: this.currentUser?.username || '用户',
        timestamp: new Date()
      }
    this.messages.push(userMessage);
      this.inputMessage = '';
      this.loading = true;
      
      // 滚动到底部
      this.$nextTick(() => {
        this.scrollToBottom();
      });
      
      try {
        if (this.currentRoom.roomType === 'ai') {
          // AI聊天 - 使用aiService发送消息给AI，传递选定的模型
          const aiResponse = await aiService.sendMessageToAI(messageContent, this.selectedModelId);
          const aiMessage = {
            id: Date.now() + 1,
            content: aiResponse.response || aiResponse.content || 'AI回复失败',
            senderType: 'ai',
            senderName: this.currentModel.name,
            timestamp: new Date()
          }
    this.messages.push(aiMessage);
        } else {
          // 普通聊天室消息 - 使用chatRoomService发送
          await chatRoomService.sendMessageToRoom(this.currentRoom.id, messageContent);
          // 在实际应用中，这里应该有WebSocket处理来接收消息
          // 模拟服务器响应
          setTimeout(() => {
            const replyMessage = {
              id: Date.now() + 1,
              content: '这是一条模拟的回复消息。',
              senderType: 'user',
              senderName: '对方用户',
              timestamp: new Date()
            }
    this.messages.push(replyMessage);
            this.loading = false;
            this.scrollToBottom();
          }, 1000);
          return; // 提前返回，避免在setTimeout外的finally中重复设置loading为false
        }
      } catch (error) {
        console.error('发送消息失败:', error);
        
        // 添加错误提示消息
        const errorMessage = {
          id: Date.now() + 2,
          content: '发送消息失败，请稍后重试。\n错误详情: ' + (error.response?.data?.message || error.message),
          senderType: 'error',
          timestamp: new Date()
        }
    this.messages.push(errorMessage);
        
        this.$message.error('发送消息失败，请稍后重试');
      } finally {
        if (this.currentRoom.roomType === 'ai') {
          this.loading = false;
          this.$nextTick(() => {
            this.scrollToBottom();
          });
        }
      }
    },
    
    // 切换聊天室
    async switchRoom(room) {
      if (this.currentRoom?.id === room.id) {
        return;
      }
      
      this.currentRoom = room;
      this.messages = [];
      
      if (room.roomType !== 'ai') {
        // 加载聊天室历史消息
        try {
          const historyMessages = await chatRoomService.getChatRoomMessages(room.id);
          this.messages = historyMessages || [];
          
          // 如果没有历史消息，显示欢迎消息
          if (this.messages.length === 0) {
            this.messages = [
              {
                id: Date.now(),
                content: `欢迎进入聊天室！这是一个${room.roomType === 'private' ? '私聊' : '群聊'}房间。`,
                senderType: 'system',
                senderName: '系统',
                timestamp: new Date()
              }
            ];
          }
        } catch (error) {
          console.error('加载历史消息失败:', error);
          this.$message.error('加载历史消息失败');
          // 使用模拟数据
          this.messages = [
            {
              id: Date.now(),
              content: `欢迎进入聊天室！这是一个${room.roomType === 'private' ? '私聊' : '群聊'}房间。`,
              senderType: 'system',
              senderName: '系统',
              timestamp: new Date()
            }
          ];
        }
      } else {
        // 加载AI聊天室欢迎消息
        this.loadAIMessages();
      }
      
      this.$nextTick(() => {
        this.scrollToBottom();
      });
    },
    
    // 取消创建聊天室
    cancelCreateRoom() {
      this.showCreateRoomDialog = false;
      this.$nextTick(() => {
        if (this.$refs.roomForm) {
          this.$refs.roomForm.resetFields();
        }
        this.roomForm.roomType = 'private';
        this.roomForm.memberIdsInput = '';
      });
    },
    
    // 切换AI模型
    onModelChange(model) {
      this.selectedModelId = model.id;
      this.currentModel = model;
      this.$message.success(`已切换到 ${model.name}`);
    },
    
    // 滚动到底部
    scrollToBottom() {
      const messageContainer = this.$refs.messageList;
      if (messageContainer) {
        messageContainer.scrollTop = messageContainer.scrollHeight;
      }
    },
    
    // 格式化日期时间
    formatDate(timestamp) {
      const date = new Date(timestamp);
      return date.toLocaleString('zh-CN', {
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });
    },
    
    // 处理文档点击，用于关闭下拉菜单等
    handleDocumentClick(event) {
      const modelSelector = event.target.closest('.model-selector');
      if (!modelSelector) {
        this.showModelDropdown = false;
      }
    },
    
    // 发送消息方法
    
    
    // 加载AI模型列表
    
    
    // 按类型获取模型
    getModelsByType(type) {
      if (type) {
        // 如果提供了类型参数，返回该类型的模型列表
        return this.aiModels.filter(model => model.type === type)
      } else {
        // 否则返回所有类型的模型分组
        const modelsByType = {}
        Object.keys(this.modelTypes).forEach(t => {
          modelsByType[t] = this.aiModels.filter(model => model.type === t)
        })
        return modelsByType
      }
    },
    
    // 获取当前模型名称
    getCurrentModelName() {
      return this.currentModel?.name || 'AI助手'
    },
    
    // 切换模型下拉菜单显示状态
    toggleModelDropdown() {
      this.showModelDropdown = !this.showModelDropdown
    },
    
    // 点击外部关闭模型下拉菜单
    handleClickOutside(event) {
      const modelSelector = document.querySelector('.ai-model-selector')
      if (modelSelector && !modelSelector.contains(event.target)) {
        this.showModelDropdown = false
      }
    },
    
    async loadMessages() {
      try {
        this.loading = true
        // 模拟AI聊天消息
        this.messages = [
          {
            id: 1,
            content: '欢迎使用AI聊天助手！',
            senderType: 'ai',
            timestamp: new Date()
          },
          {
            id: 2,
            content: '可以点击右上角的「创建聊天室」按钮来创建新的聊天。',
            senderType: 'ai',
            timestamp: new Date(Date.now() + 1000)
          },
          {
            id: 3,
            content: '支持两种模式：1. 与AI助手聊天 2. 创建人人聊天室（私聊或群聊）',
            senderType: 'ai',
            timestamp: new Date(Date.now() + 2000)
          }
        ]
      } catch (error) {
        console.error('Load messages error:', error)
      } finally {
        this.loading = false
      }
    },
    
    async loadRoomMessages(roomId) {
      try {
        this.loading = true
        // 模拟加载聊天室消息
        this.messages = [
          {
            id: Date.now(),
            content: `欢迎进入聊天室！这是一个模拟的${roomId === 1 ? '私聊' : '群聊'}房间。`,
            senderType: 'system',
            senderName: '系统',
            timestamp: new Date()
          },
          {
            id: Date.now() + 1,
            content: '您可以在这里发送和接收消息。',
            senderType: 'user',
            senderName: '用户',
            timestamp: new Date(Date.now() + 1000)
          }
        ]
      } catch (error) {
        console.error('Load room messages error:', error)
        this.messages = []
      } finally {
        this.loading = false
      }
    },
    async loadUserChatRooms() {
      try {
        // 模拟加载用户聊天室列表
        // 实际环境中会调用API获取真实数据
        console.log('加载用户聊天室列表')
      } catch (error) {
        console.error('Load user chat rooms error:', error)
      }
    },
    async handleCreateRoom() {
      if (!this.roomForm.name.trim()) {
        this.$message.error('请输入聊天室名称')
        return
      }
      
      this.creatingRoom = true
      
      try {
        // 模拟创建聊天室（不依赖后端API）
        const newRoom = {
          id: Date.now(),
          name: this.roomForm.name.trim(),
          roomType: this.roomForm.roomType,
          createdAt: new Date().toISOString()
        }
        
        // 添加到聊天室列表
        this.chatRooms.push(newRoom)
        
        // 切换到新创建的聊天室
        await this.switchRoom(newRoom)
        
        this.$message.success('聊天室创建成功')
        this.showCreateRoomDialog = false
        
        // 重置表单
        this.roomForm = {
          name: '',
          roomType: 'private',
          memberIdsInput: ''
        }
      } catch (error) {
        console.error('Create room error:', error)
        this.$message.error('聊天室创建失败，请重试')
      } finally {
        this.creatingRoom = false
      }
    },

    handleLogout() {
      authService.logout()
      this.$router.push('/login')
    }
  }
